<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流通产品-疫苗</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/common.css">
    <link rel="stylesheet" href="../src/css/ltcp.css">
    <style>
        #myModal td,
        #myModal2 td {
            height: auto;
            padding: 8px;
            line-height: 1.3em;

        }
    </style>
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]>
        <script src="../src/js/html5shiv.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="wrapper" id="app">
        <!-- Modal 企业风险信息详情 -->
        <div class="modal fade" id="myModal-de">
            <div class="modal-dialog" style="width:1120px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业风险信息详情</h4>
                    </div>
                    <div class="modal-body">
                        <div class="space-box">
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">企业</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">GSP</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">信源
                                    </a>
                                </div>
                                <div class="right-txt">
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>违法行为</td>
                                                        <td>性质</td>

                                                    </tr>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>时间</td>
                                                        <td>处罚内容</td>
                                                        <td>罚款金额</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>缺陷条款</td>
                                                        <td>缺陷内容</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">模型</a>
                                </div>
                                <div class="right-txt">
                                    <!-- <textarea class="form-control" disabled style="height: 104px;"></textarea> -->

                                    <textarea class="form-control" style="height: 104px;"></textarea>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 源头企业一览表-->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:1020px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">源头企业一览表
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>企业名称</td>
                                        <td>经营品种</td>
                                        <td>省内储配企业名称 </td>
                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                <span @click="handleClickQY" class="a-click-style">上海联合赛尔生物工程有限公司</span>

                                            </td>
                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                <span @click="handleClickQY" class="a-click-style">上海联合赛尔生物工程有限公司</span>

                                            </td>
                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 源头企业历年供货量变化情况line-->
        <div class="modal fade" id="myModal-1">
            <div class="modal-dialog" style="width:820px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">源头企业历年供货量变化情况
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div id="line" style="height:280px;">

                        </div>
                    </div>

                </div>
            </div>
        </div>


        <!-- Modal 疫苗流通品种一览表
-->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog" style="width:1020px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">疫苗流通品种一览表

                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>疫苗品种</td>
                                        <td>生产企业名称</td>
                                        <td>储配企业名称 </td>
                                        <td>批准文号 </td>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="">
                                                <span @click="handleClickLB"
                                                    class="a-click-style">AC群脑膜炎球菌（结合）b型流感嗜血杆菌</span>

                                            </td>
                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td>
                                                华东医药
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                <span data-toggle="modal" data-target="#myModal2"
                                                    class="a-click-style">上海联合赛尔生物工程有限公司</span>

                                            </td>
                                            <td>重组乙亚单位/菌体霍乱疫苗（肠溶胶囊）儿</td>
                                            <td>
                                                华东医药
                                            </td>
                                            <td>
                                                华东医药
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 疫苗品种流通量历年变化趋势line-->
        <div class="modal fade" id="myModal-2">
            <div class="modal-dialog" style="width:820px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">疫苗品种流通量历年变化趋势
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div id="line2" style="height:280px;">

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header">
            </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="javascript:;" class="ltcp on">
                            流通产品
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./jyqy.html" class="jyqy  ">
                            <span class="badge">2</span>

                            经营企业
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qtxx.html" class="qtxx ">
                            <span class="badge">2</span>

                            其他信息
                        </a>
                    </div>

                </nav>
                <div class="content-box ">

                    <div class="ready_container " :class="isReady?'data-ready':''">

                        <div class="content-box-area flex">

                            <div class="cb-left relative">
                                <select style="position: absolute;width:180px;top: 40px;left:400px;z-index: 999;"
                                    class="form-control">
                                    <option value="1">2019年08月21日</option>
                                </select>
                                <div class="tab-group stat_tab">
                                    <a href="javascript:;" :class="tab==1?'on':''" @click="tab=1">疫苗</a>
                                    <a href="javascript:;" :class="tab==2?'on':''" @click="tab=2">普通药品</a>
                                </div>
                                <div class="stat-1">
                                    <div class="s-title s-title-1"></div>
                                    <div class="flex country_map_bg">
                                        <div class="flex-1 pl50">
                                            <!--疫苗-->
                                            <template v-if="tab==1">
                                                <div data-toggle="modal" data-target="#myModal"
                                                    class="amount_stat as_1 f17">企业源头数量(<span
                                                        class="color-yellow">45</span>)</div>
                                                <div data-toggle="modal" data-target="#myModal2"
                                                    class="amount_stat as_2 f17">流通产品数量(<span
                                                        class="color-yellow">60</span>)</div>
                                                <div class="ymzxfx f17" @click="turnToYmzxfx"><img
                                                        src="../src/img/ltcp/icon_stgz2.png"
                                                        class="icon_ymzxfx vmd mr20"><span
                                                        class="vmd color-blue">疫苗专项分析</span></div>
                                            </template>
                                            <!--普通药品-->
                                            <template v-else-if="tab==2">
                                                <div data-toggle="modal" data-target="#myModal"
                                                    class="amount_stat as_1 f17">企业源头数量(<span
                                                        class="color-yellow">2500</span>)</div>
                                                <div data-toggle="modal" data-target="#myModal2"
                                                    class="amount_stat as_2 f17">流通产品数量(<span
                                                        class="color-yellow">2500</span>)</div>
                                            </template>
                                        </div>
                                        <div class="country_map relative">
                                            <div class="text-center">
                                                <v-chart :options="stat1.chartOption" class="echart_c_1 inline-block"
                                                    @mouseover="hoverMap" />
                                            </div>
                                            <!--地图上的悬浮框-->
                                            <div v-if="stat1.tipInfo.data&&stat1.tipInfo.data.name&&stat1.tipInfo.data.otherValue"
                                                class="tip-info"
                                                :style="{top:stat1.tipInfo.position.y+'px',left:stat1.tipInfo.position.x+'px'}">
                                                {{stat1.tipInfo.data.name}}<br>
                                                源头企业数量：{{stat1.tipInfo.data.otherValue.ytqysl||0}}<br>
                                                流通产品数量：{{stat1.tipInfo.data.otherValue.ltcpsl||0}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--疫苗不良反应发生率前十产品-->
                                <div v-if="tab==1">
                                    <div style="display: flex">
                                        <div class="stat-2 bg1-s" style="width:764px">
                                            <div class="s-title s-title-2"></div>
                                            <v-chart :options="stat2.chartOption" class="echart_c_2" />

                                        </div>
                                        <div style="flex:1;margin-left: 8px;" class="bg2-s">
                                            <div class="s-title s-title-2"></div>
                                            <div id="bar-mian" style="height:250px"></div>
                                        </div>
                                    </div>

                                </div>

                                <!--追溯查询-->
                                <div class="stat-4" v-if="tab==2">
                                    <div class="s-title s-title-4"></div>
                                    <div class="search_content mb20 pl20 pt20 f16 mt20">

                                        <div class="fx-item flex mb10 mt20">
                                            <div class="f-item-name pt10 pl20">
                                                <span class="color-blue f16">企业条件</span>

                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">企业名称：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block ">
                                                </span>
                                            </div>


                                            <div class="flex-1  m-r20">
                                                <span class="l-name l-width-2 pl10">信用代码：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block ">
                                                </span>
                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2 pl10">许可证编号：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block ">
                                                </span>
                                            </div>
                                        </div>
                                        <div class="fx-item flex mb10">
                                            <div class="f-item-name pt10 pl20">
                                                <span class="color-blue f16">产品条件</span>

                                            </div>
                                            <div class="flex-1 ">
                                                <span class="l-name l-width-2">通用名：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block ">
                                                </span>

                                            </div>
                                            <div class="flex-1 m-r20 ">
                                                <span class="l-name l-width-2 pl10">批准文号：</span>
                                                <span>
                                                    <input type="text" class="form-control  inline-block "
                                                        placeholder="">

                                                </span>
                                            </div>
                                            <div class="flex-1 ">
                                            </div>
                                        </div>

                                        <div class="text-right pr20">
                                            <button class="mr10" @click="turnToZsfx">追溯分析</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="cb-right ">
                                <div class="stat-3">
                                    <div class="s-title s-title-3"></div>
                                    <div class="yj-container">
                                        <ul>
                                            <li v-for="item in stat3.yjList">
                                                {{item.name}}
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="yjczfx ellipsis">
                                        <img src="../src/img/ltcp/icon_voice.png" class="vmd">
                                        <span class="vmd">预警处置风险：{{stat3.yjczfx.name||'暂无'}}</span>
                                    </div>
                                    <img src="../src/img/ltcp/line.png" class="line">
                                    <div class="form">
                                        <div class="btn-list flex text-center">
                                            <div data-toggle="modal" data-target="#myModal-de" class="flex-1 tab">信源
                                            </div>
                                            <div data-toggle="modal" data-target="#myModal-de" class="flex-1 tab">模型
                                            </div>
                                            <div data-toggle="modal" data-target="#myModal-de" class="flex-1 tab">企业
                                            </div>
                                            <div data-toggle="modal" data-target="#myModal-de" class="flex-1 tab">产品
                                            </div>
                                            <div data-toggle="modal" data-target="#myModal-de" class="flex-1  ">
                                                <div class="cz-tab-btn">处置</div>
                                            </div>
                                        </div>
                                        <div class="form_content">
                                            <div class="mb20">
                                                <span>会商确定类型：</span>
                                                <select v-model="stat3.form.hsqdlx"
                                                    class="form-control hsqdlx inline-block">
                                                    <option :value="1">预警处置</option>
                                                    <option :value="2">预警处置2</option>
                                                    <option :value="3">预警处置3</option>
                                                </select>
                                            </div>
                                            <div>
                                                <div class="mb10">会商意见：</div>
                                                <textarea v-model="stat3.form.hsyj" class="form-control">

                                                    </textarea>
                                            </div>
                                            <div class="text-right"><button class="submit-btn"
                                                    @click="submitForm">提交</button></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
    </div>
</body>
<script type="text/javascript" src="../src/js/jquery-1.11.1.min.js"></script>
<script src="../src/js/vue.min.js"></script>
<script src="../src/js/echarts.js"></script>
<script src="../src/js/vue-echarts@4.0.2"></script>
<script src="../src/js/modal.min.js"></script>
<script src="../src/js/chart-options-ltcp.js"></script>
<script type="text/javascript" src="../src/js/ltcp.js"></script>

</html>